<template>
	<view class="page">
		<view class="message-page">
			<u-empty
				mode="message"
				:iconSize="100"
				:textSize="28"
				textColor="#fff"
				iconColor="#fff"
				marginTop="50%"
				:show="!messageList.length"
			>
			</u-empty>
			
			<view class="message-content" v-if="messageList.length">
				<view class="message-options flex">
					<view class="readall" @click="notice()">添加提醒</view>
					<view class="readall" @click="readAll()">全部已读</view>
					<view class="clearall" @click="clearAll()">全部清除</view>
				</view>
				
				<view class="message-list">
					<view class="message-list__item" v-for="item in messageList" @click="messageDetails(item)">
						<view class="title" :style="{ color: item.mtype==1 ? '#f46c6c' : '#b18421'}"> {{ item.title }} </view>
						<view class="summary"> {{ item.summary }} </view>
						<view :class="[item.read_time > 0 ? 'isread' : 'unread', 'readtime flex']"> {{ item.read_time > 0 ? '已读' : '未读' }} </view>
					</view>
				</view>
				<u-loadmore :status="loadStatus" fontSize="28" color="#e2e2e2"  />
			</view>
			
			<u-modal :show="readAllFlag" confirmColor="rgb(83, 194, 29)" showCancelButton title="操作提醒" content="确定将全部消息标记为已读吗？" @cancel="readAllFlag=false" @confirm="confirmReadAll" ></u-modal>
			<u-modal :show="clearAllFlag" confirmColor="rgb(83, 194, 29)" showCancelButton title="操作提醒" content="此操作不可恢复,确定将全部消息清除吗？" @cancel="clearAllFlag=false" @confirm="confirmClearAll"></u-modal>
		</view>
	</view>
</template>

<script>
	import { getUserMessages,readUserMessages,clearUserMessages } from '@/api/api.js'
	export default {
		data() {
			return {
				messageList: [],
				filter: {
					page: 1,
				},
				loadStatus: '',
				readAllFlag: false,
				clearAllFlag: false
			}
		},
		methods: {
			loadMessageList: function() {
				if ( this.loadStatus == 'nomore' ) {
					return console.log('nomore')
				}
				
				uni.showLoading({
					title: '加载中'
				})
				this.loadStatus = 'loading'
				
				getUserMessages(uni.$lv.object.queryParams(this.filter)).then(res => {
					uni.hideLoading()
					
					let _result = res.data || []
					if ( !_result.length ) {
						this.loadStatus = 'nomore'
					}
					this.messageList = uni.$lv.array.union(this.messageList , _result)
					this.loadStatus = ''
				})
			}
			,initPage() {
				this.loadStatus = 'loadmore'
				this.filter.page = 1
				this.messageList = []
			}
			,readAll() {
				this.readAllFlag = true
			}
			,confirmReadAll() {
				uni.showLoading({
					title: '操作中'
				})
				readUserMessages(0).then(_ => {
					uni.hideLoading()
					
					uni.showToast({
						title: '标记成功'
					})
					
					this.readAllFlag = false
					this.initPage()
				})
			}
			,clearAll() {
				this.clearAllFlag = true
			}
			,confirmClearAll() {
				uni.showLoading({
					title: '操作中'
				})
				clearUserMessages(0).then(_ => {
					uni.hideLoading()
					
					uni.showToast({
						title: '清除成功'
					})
					this.clearAllFlag = false
					this.initPage()
				})
			}
			,messageDetails(message) {
				readUserMessages(message.id)
				uni.navigateTo({
					url: `/pagesA/pages/message/details?id=${message.id}`
				})
			}
			,notice() {
				return uni.navigateTo({
					url: `/pagesA/pages/sales/notice`
				})
			}
		},
		mounted() {
			this.loadMessageList()
		},
		/**
		 * 下拉刷新回调函数
		 */
		onPullDownRefresh() {
			this.initPage()
			this.loadMessageList()
			uni.stopPullDownRefresh()
		},
		/**
		 * 上拉加载回调函数
		 */
		onReachBottom() {
			this.filter.page++
			this.loadMessageList()
		}
	}
</script>

<style lang="scss" scoped>
.page {
	background-color: $uni-bg-color-grey;
	min-height: calc(100vh - 74px);
	color: #333;
	padding: 10rpx 30rpx;
	.message-content {
		font-size: 26rpx;
		.message-options {
			justify-content: flex-end;
			margin: 10rpx 0 20rpx 0;
			color: #333;
			font-size: 28rpx;
			.readall {
				margin-right: 20rpx;
			}
			.clearall {
				
			}
		}
		.message-list {
			&__item {
				background-color: #fff;
				padding: 30rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				.title {
					font-weight: bold;
					color: #333;
					margin-bottom: 10rpx;
				}
				.summary {
					color: #999;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;
					margin-bottom: 10rpx;
				}
				.readtime {
					justify-content: flex-end;
					font-size: 24rpx;
				}
				.isread {
					color: rgb(36, 147, 25);
				}
				.unread {
					color: #999;
				}
			}
		}
	}
}
</style>
